<template>
  <page-header-wrapper :content="$t('permission.account.about')">
    <!-- drawer for extra -->
    <div class="extra-content" slot="extraContent">
      <a-button type="button" size="small" @click="openSearchForm">{{ $t('action.search') }}</a-button>
      <a-button type="primary" size="small" @click="openAddForm">{{ $t('action.add') }}</a-button>
    </div>
    <!-- drawer for search -->
    <a-drawer width="650" :title="$t('message.account.form.search')" :visible="searchFormVisible" @close="closeSearchForm">
      <PermissionAccountSearch :origin="searchFormOrigin" @update:submit="submitSearchForm" @update:close="closeSearchForm" />
    </a-drawer>
    <!-- drawer for add -->
    <a-drawer width="650" :title="$t('permission.account.form.add')" :visible="addFormVisible" @close="closeAddForm">
      <PermissionAccountAdd :origin="addFormOrigin" @update:submit="submitAddForm" @update:close="closeAddForm" />
    </a-drawer>
    <!-- drawer for edit -->
    <a-drawer width="650" :title="$t('permission.account.form.edit')" :visible="editFormVisible" @close="closeEditForm">
      <PermissionAccountEdit :origin="editFormOrigin" @update:submit="submitEditForm" @update:close="closeEditForm" />
    </a-drawer>
    <!-- resources list -->
    <div class="table-list">
      <a-table
        rowKey="id"
        :columns="listColumns"
        :data-source="listItems"
        :loading="listLoading"
        :pagination="listPagination"
        @change="loadPaginator"
      >
        <div slot="status" slot-scope="item">
          <div v-if="item.status === 0"><span class="status-failed"><a-icon type="info" /> {{ $t('permission.account.status.created') }}</span></div>
          <div v-if="item.status === 1"><span class="status-enabled"><a-icon type="check" /> {{ $t('permission.account.status.enabled') }}</span></div>
          <div v-if="item.status === 2"><span class="status-disabled"><a-icon type="warning" /> {{ $t('permission.account.status.disabled') }}</span></div>
          <div v-if="item.status === 3"><span class="status-ignored"><a-icon type="lock" /> {{ $t('permission.account.status.locked') }}</span></div>
        </div>
        <div slot="kind" slot-scope="item">
          <span v-if="item.kind === 1">{{ $t('permission.resource.kind.folder') }}</span>
          <span v-else-if="item.kind === 2">{{ $t('permission.resource.kind.page') }}</span>
          <span v-else-if="item.kind === 3">{{ $t('permission.resource.kind.action') }}</span>
          <span v-else>Error</span>
        </div>
        <div slot="action" slot-scope="item" class="action-list">
          {{ $t('action.access') }}
          <a-divider type="vertical" />
          <a @click="openEditForm(item)">{{ $t('action.edit') }}</a>
          <a-divider type="vertical" />
          <a @click="openConfirmDelete(item)">{{ $t('action.delete') }}</a>
        </div>
      </a-table>
    </div>
  </page-header-wrapper>
</template>

<script>
import { Modal } from 'ant-design-vue'
import { getPermissionAccount } from '@/api/v1'
import PermissionAccountAdd from './Add'
import PermissionAccountEdit from './Edit'
import PermissionAccountSearch from './Search'

export default {
  components: { PermissionAccountSearch, PermissionAccountEdit, PermissionAccountAdd },
  computed: { query () { return this.$route.query } },
  created () { this.loadList() },
  data () {
    return {
      addFormOrigin: { },
      addFormVisible: false,
      editFormOrigin: { },
      editFormVisible: false,
      searchFormOrigin: {},
      searchFormVisible: false,
      listColumns: [
        { key: 'status', title: this.$t('status'), scopedSlots: { customRender: 'status' } },
        { key: 'name', title: this.$t('permission.account.name'), dataIndex: 'name' },
        { key: 'mobile', title: this.$t('permission.account.mobile'), dataIndex: 'mobile' },
        { key: 'action', scopedSlots: { customRender: 'action' } }
      ],
      listConditions: { page: 1, size: 25 },
      listItems: [],
      listLoading: false,
      listPagination: { current: 0, pageSize: 0, total: 0 },
      modal: null,
      modalOption: {
        cancelText: this.$t('action.close'),
        centered: true,
        destroyOnClose: true,
        okText: this.$t('action.ok'),
        okType: 'warning',
        parentContext: this
      }
    }
  },
  methods: {
    createModal (opt) {
      if (this.modal !== null) {
        this.modal.destroy()
      }
      this.modal = Modal.confirm(opt)
    },

    async loadList () {
      this.listLoading = true
      // Load resource list.
      getPermissionAccount(this.listConditions, (v) => {
        this.listLoading = false
        this.listItems = v.data.body
        // Fill pagination.
        this.listPagination.current = v.data.paging.curr
        this.listPagination.pageSize = v.data.paging.size
        this.listPagination.total = v.data.paging.total
        // Condition filters.
        this.listConditions.page = this.listPagination.current
        this.listConditions.size = this.listPagination.pageSize
      }, (err) => {
        this.listLoading = false
        this.$message.error(err)
      })
    },
    loadPaginator (v) { this.listConditions.page = v.current; this.listConditions.size = v.pageSize; this.loadList() },

    closeAddForm () { this.addFormVisible = false },
    closeEditForm () { this.editFormVisible = false },
    closeSearchForm () { this.searchFormVisible = false },

    openAddForm () { this.addFormVisible = true },
    openEditForm (item) { this.editFormOrigin = item; this.editFormVisible = true },
    openSearchForm () { this.searchFormVisible = true },

    openConfirmDelete (item) {
      const opt = this.modalOption
      opt.title = this.$t('permission.resource.confirm.delete')
      opt.content = this.$t('permission.resource.confirm.delete.message', { label: item.label })
      opt.onOk = () => { this.sendDelete(item) }
      this.createModal(opt)
    },
    openConfirmDisable (item) {
      const opt = this.modalOption
      opt.title = this.$t('permission.resource.confirm.disable')
      opt.content = this.$t('permission.resource.confirm.disable.message', { label: item.label })
      opt.onOk = () => { this.sendDisable(item) }
      this.createModal(opt)
    },
    openConfirmEnable (item) {
      const opt = this.modalOption
      opt.title = this.$t('permission.resource.confirm.enable')
      opt.content = this.$t('permission.resource.confirm.enable.message', { label: item.label })
      opt.onOk = () => { this.sendEnable(item) }
      this.createModal(opt)
    },

    resetConditions () {
      const q = this.query
      // Use application site id from query string.
      if (q.sid !== null && q.sid !== undefined && q.sid !== '') {
        this.listConditions.sid = q.sid
      }
      // Use application site id from query string.
      if (q.pid !== null && q.pid !== '') {
        this.listConditions.pid = q.pid
      }
    },

    async sendDelete (item) {},
    async sendDisable (item) {},
    async sendEnable (item) {},

    submitAddForm () { this.closeAddForm(); this.loadList() },
    submitEditForm () { this.closeEditForm(); this.loadList() },
    submitSearchForm (v) {
      this.listConditions.name = v.name
      this.listConditions.mobile = v.mobile
      this.closeSearchForm()
      this.loadList()
    }
  },
  watch: {
  }
}
</script>
